<template>

  <div id="taitu">


    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="房源名称">
        <el-input v-model="formInline.name" placeholder="房源名称"></el-input>
      </el-form-item>
<!--      <el-form-item label="状态">
        <el-input v-model="formInline.status" placeholder="状态"></el-input>
      </el-form-item>-->
      <el-form-item label="装修">
        <el-input v-model="formInline.zhuang" placeholder="装修"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="initData">查询</el-button>
      </el-form-item>
    </el-form>


    <el-button type="primary" @click="quan">全量导入</el-button>



    <el-row>
      <el-col :span="8" v-for="o in tableData"  :offset="2">
        <el-card :body-style="{ padding: '30px' }">
          <img :src="'http://192.168.235.131:6100'+o.pic" class="image" style="width: 300px;height: 300px">
          <div style="padding: 14px;">
            <span v-html="'房源名称:'+o.name">{{o.name}}</span><br>
            <span>房源状态:{{o.status}}</span><br>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="xiang(o)">房源详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="sizes"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog title="房源详情" :visible.sync="dialogFormVisible">
      <el-form :model="o">
        <el-form-item label="房源名称" :label-width="formLabelWidth" >
          <el-input v-model="o.name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="房源楼号" :label-width="formLabelWidth">
          <el-input v-model="o.num" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="单元号" :label-width="formLabelWidth">
          <el-input v-model="o.yuan" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="门牌号" :label-width="formLabelWidth">
          <el-input v-model="o.pai" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="户型朝向" :label-width="formLabelWidth">
          <el-input v-model="o.xiang" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="装修" :label-width="formLabelWidth">
          <el-input v-model="o.zhuang" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="o.lou" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="总楼数" :label-width="formLabelWidth">
          <el-input v-model="o.zong" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="管家" :label-width="formLabelWidth">
          <el-input v-model="o.guan" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="房产面积" :label-width="formLabelWidth">
          <el-input v-model="o.mian" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="租金" :label-width="formLabelWidth">
          <el-input v-model="o.money" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款方式 押金" :label-width="formLabelWidth">
          <el-input v-model="o.ya" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款方式 付款" :label-width="formLabelWidth">
          <el-input v-model="o.fu" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="公共配套" :label-width="formLabelWidth">
          <el-input v-model="o.gong" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="房间配套" :label-width="formLabelWidth">
          <el-input v-model="o.fang" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="房间图片" :label-width="formLabelWidth">
<!--          <el-input v-model="o.pic" autocomplete="off"></el-input>-->
          <img :src="'http://192.168.235.131:6100'+o.pic" class="image" style="width: 300px;height: 300px">
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="o.status" autocomplete="off" disabled></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>




  </div>

</template>

<script>
export default {
  name: "index",
  data(){
    return{
      tableData:[],
      dialogFormVisible:false,
      form:{},
      formLabelWidth:"120px",
      o:{},
      formInline:{},
      current:1,
      sizes:[2,4,6],
      size:4,
      total:0,

    }
  },
  created(){
       this.initData();
  },
  methods:{
    initData(){
      this.axios.get("http://192.168.235.131:6100/house/getHouse",{
        params:{
          name:this.formInline.name,
          zhuang:this.formInline.zhuang,
          pageNum:this.current,
          pageSize:this.size,
        }
      }).then((response) => {
           this.tableData = response.data.list;
           this.total = response.data.total;
      })
    },
    xiang(o){
       this.dialogFormVisible=true;
       this.o=o;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.initData();
    },
    quan(){
      this.axios.get("http://192.168.235.131:6100/es/list").then((response) => {

      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

